<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.d1{
				background-color: pink;
				border: 1px solid red;
				width: 400px;
				height: 200px;
				text-align: center;
			}
			input{
				background-color: red;
				color: white;
				border: 0px;
				width: 80px;
				height: 30px;
				margin: 10px;
			}
			.d2{
				background-color: #00FFFF;
				border: 5px solid red;
				width: 600px;
				height: 400px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="d1" value="">
			<input type="button" value="Get Style">
			<input type="button" value="Set Style">
			<input type="button" value="Default Style">
			<!-- <input type="text" class="p1" value="" /> -->
			<textarea rows="5" cols="45">
				
			</textarea>
		</div>
		<script type="text/javascript">
			$(function(){
				$("input").eq(0).click(function(){
					var a = $(".d1").css("width");
					var b = $(".d1").css("height");
					var c = $(".d1").css("background-color");
					var d = $(".d1").css("border()");
					var e = $(".d1").css("text-align");
					$("textarea").val("宽:" + a + "高度:" + b + "背景色:" + c + "边框:" + d + "对齐方式:" + e);
				})
				$("input").eq(1).click(function(){
					$(".d1").addClass("d2");
				})
				$("input").eq(2).click(function(){
					$(".d1").removeClass("d2");
				})
			})
		</script>
	</body>
</html>
